<template>
  <view class="container">
    <view class="head">
      <view class="head_box flex-center" :class="active == 1? 'head_box_active':''" @tap="activeHandle(1)">
        一级用户(3)
      </view>
      <view class="head_box flex-center" :class="active == 2? 'head_box_active':''" @tap="activeHandle(2)">
        二级用户(0)
      </view>
    </view>
    <view class="box" v-for="(item,index) in list" :key="index">
      <view class="box_left">
        <text>{{index+1 }}.</text>
        <image :src="item.image" mode=""></image>
        <view>{{item.title}}</view>
      </view>
      <view class="box_right">
        {{item.date}}
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';

  const active = ref(1)
  const activeHandle = (index : number) => {
    active.value = index
  }
  const list = ref([])
  const data = [{
    image: '/static/my/avatar.jpg',
    title: '小包子',
    date: '2020-10-23'
  }, {
    image: '/static/my/avatar.jpg',
    title: '小包子',
    date: '2020-10-23'
  }, {
    image: '/static/my/avatar.jpg',
    title: '小包子',
    date: '2020-10-23'
  }, {
    image: '/static/my/avatar.jpg',
    title: '小包子',
    date: '2020-10-23'
  },]
  const getList = () => {
    list.value.push(...data)
    uni.stopPullDownRefresh()
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 20
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  onLoad(() => {
    list.value.push(...data)
  })
</script>

<style lang="less" scoped>
  .container {
    width: 750rpx;
    height: 100%;
    background: #F4F4F4;

    .head {
      width: 750rpx;
      height: 100rpx;
      background: #FFFFFF;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      display: flex;
      border-bottom: 1rpx solid rgba(#000, .1);

      &_box {
        flex: 1;
       
      }
      &_box_active {
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }
    }

    .box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      box-sizing: border-box;
      font-weight: 500;
      font-size: 30rpx;
      width: 750rpx;
      height: 100rpx;
      background: #FFFFFF;
      border-bottom: 1rpx solid rgba(#000, .1);
      &:last-child {
        border-bottom: 0;
      }
      &_left {
        color: #333333;
        display: flex;
        align-items: center;

        image {
          width: 90rpx;
          height: 90rpx;
          margin: 0 15rpx;
          border-radius: 50%;
        }
      }

      &_right {
        color: #666666;
      }
    }
  }
</style>